Component({
  externalClasses: [
    'custom-class'
  ],
  properties: {
    navTitle: { // 页面名称
      type: String,
      value: ''
    },
    isBack: { // 是否有返回按钮
      type: Boolean,
      value: false
    },
    showmsg: { // 是否有msg的icon
      type: Boolean,
      value: false
    },
    needNav: { // 是否需要nav
      type: Boolean,
      value: true
    },
    hasTabbar: { // 是否有自定义tabbar
      type: Boolean,
      value: false
    },
    bgColor: { // 背景颜色
      type: String,
      value: '#FFFFFF'
    },
    isRefresher: {
      type: Boolean,
      value: false
    },
    scrollTop: {
      type: Number,
      value: 0
    },
    allowScroll: {
      type: Boolean,
      value: true
    }
  },
  data: {
    windowHeight: 0,
    pageHeight: 0,
    navHeight: 0,
    timer: null, // 保存定时器
  },
  lifetimes: {
    attached() {
      const _this = this
      // 先取出页面高度 windowHeight
      wx.getSystemInfo({
        success: function(res) {
          _this.setData({
            windowHeight: res.windowHeight
          });
        }
      });

      // 然后取出navbar和header的高度
      // 根据文档，先创建一个SelectorQuery对象实例
      let query = wx.createSelectorQuery().in(this);
      // 然后逐个取出navbar和header的节点信息
      // 选择器的语法与jQuery语法相同
      query.select('.scroll-container-header').boundingClientRect();
      // query.select('.scroll-container-body').boundingClientRect();
      query.select('.van-tabbar').boundingClientRect();

      // 执行上面所指定的请求，结果会按照顺序存放于一个数组中，在callback的第一个参数中返回
      query.exec((res) => {
        // 分别取出navbar和header的高度
        const navbarHeight = res[0].height;
        // 然后就是做个减法
        const scrollViewHeight = this.data.windowHeight - navbarHeight;

        this.setData({
          pageHeight: scrollViewHeight,
          navHeight: res[0].height
        })
      });
    }
  },
  // 小程序api自带
  onPullDownRefresh() {
    // 监听该页面用户下拉刷新事件
    // 可以在触发时发起请求，请求成功后调用wx.stopPullDownRefresh()来结束下拉刷新
    console.log('下拉拉拉')
  },
  methods: {
    toupper() {
      this.triggerEvent('upperEvent')
    },
    tolower() {
      this.triggerEvent('lowerEvent')
    },
    customScroll(e) {
      // 防抖，优化性能
      // 当滚动时，滚动条位置距离页面顶部小于设定值时，触发下拉刷新
      // 通过将设定值尽可能小，并且初始化scroll-view组件竖向滚动条位置为设定值。来实现下拉刷新功能，但没有官方的体验好
      // clearTimeout(this.timer)
      // if (e.detail.scrollTop < this.data.scrollTop) {
      //   this.timer = setTimeout( () => {
      //     this.refresh()
      //   }, 350)
      // }
      this.triggerEvent('scrollEvent', e.detail)
    },
    refresh() { // 函数式触发开始下拉刷新。如可以绑定按钮点击事件来触发下拉刷新
      const _this = this
      wx.startPullDownRefresh({
        success(errMsg) {
          console.log('开始下拉刷新', errMsg)
        },
        complete() {
          console.log('下拉刷新完毕')
          _this.triggerEvent('refresh')
        }
      })
    }
  }
})
